<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>教练列表-会员</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/font.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/xadmin.css">
    <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/Swiper/3.4.2/js/swiper.jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/Swiper/3.4.2/css/swiper.min.css">
    <script src="${pageContext.request.contextPath}/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/xadmin.js"></script>

</head>
<body>
<!-- 顶部开始 -->
<div class="container">
    <div class="logo"><a href="./index.html">健身房管理系统 V1.1</a></div>
    <div class="open-nav"><i class="iconfont">&#xe699;</i></div>
    <ul class="layui-nav right" lay-filter="">
        <li class="layui-nav-item">
            <a href="javascript:;">${logUsername}</a>
            <dl class="layui-nav-child"> <!-- 二级菜单 -->
                <dd><a href="${pageContext.request.contextPath}/member/toOneselfpage.action">个人中心</a></dd>
                <dd><a href="${pageContext.request.contextPath}/member/toMemcourseSchedule.action">课程表</a></dd>
                <dd><a href="${pageContext.request.contextPath}/member/outlogin.action">退出</a></dd>
            </dl>
        </li>
        <li class="layui-nav-item"><a href="${pageContext.request.contextPath}/index.jsp">前台首页</a></li>
    </ul>
</div>
<!-- 顶部结束 -->
<!-- 中部开始 -->
<div class="wrapper">
    <!-- 左侧菜单开始 -->
    <div class="left-nav">
        <div id="side-nav">
            <ul id="nav">
                <li class="list" current>
                    <a href="">
                        <i class="iconfont">&#xe761;</i>
                        欢迎页面
                        <i class="iconfont nav_right">&#xe697;</i>
                    </a>
                </li>
                <%--        教练--%>
                <li class="list">
                    <a href="${pageContext.request.contextPath}/member/toCoachpage.action">
                        <i class="iconfont">&#xe70b;</i>
                        教练查询
                        <i class="iconfont nav_right">&#xe697;</i>
                    </a>
                </li>
                <%--        课程管理--%>
                <li class="list">
                    <a href="${pageContext.request.contextPath}/member/toCoursepage.action">
                        <i class="iconfont">&#xe70b;</i>
                        课程查询
                        <i class="iconfont nav_right">&#xe697;</i>
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <!-- 左侧菜单结束 -->
    <!-- 右侧主体开始 -->
    <div class="page-content">
        <div class="content">
            <!-- 右侧内容框架，更改从这里开始 -->
            <form class="layui-form xbs" action="">
                <div class="layui-form-pane" style="text-align: center;">
                    <div class="layui-form-item" style="display: inline-block;">
                        <label class="layui-form-label xbs768">教练查询:</label>
                        <div class="layui-input-inline xbs768">
<%--                            <input class="layui-input" placeholder="开始日" id="LAY_demorange_s">--%>
                            <input type="text" id="cotype" name="cotype" placeholder="请输入健身类别" autocomplete="off" class="layui-input">
                        </div>
                        <div class="layui-input-inline">
                            <input type="text" id="username" name="username" placeholder="请输入用户名" autocomplete="off" class="layui-input">
                        </div>
                        <div class="layui-input-inline" style="width:80px">
                            <%-- 用Ajax发送搜索信息，接收信息展示在表格中--%>
                            <button type="button" class="layui-btn"  id="memfindcoach">搜索</button>
                        </div>
                    </div>
                </div>
            </form>
            <div id="table">
                <xblock>
                    <span class="layui-btn">教练信息展示</span><span class="x-right" style="line-height:40px" id="listSize">共有数据：${coachInfo.list.size()} 条</span>
                </xblock>
                <table class="layui-table">
                    <thead>
                    <tr>
                        <th hidden>ID</th>
                        <th>教练性名</th>
                        <th>性别</th>
                        <th>联系电话</th>
                        <th>健身方向</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody id="tb">
                    <c:forEach items="${coachInfo.list}" var="coach">
                        <tr>
                            <td hidden>${coach.coachid}</td>
                            <td>${coach.coachrealname}</td>
                            <td>${coach.coachsex}</td>
                            <td>${coach.coachLogName}</td>
                            <td>${coach.cotype}</td>
                            <td class='td-status'>
                                <span class='layui-btn layui-btn-normal layui-btn-mini' onclick='reser(${coach.coachid})'>预约</span>
                            </td>
                        </tr>
                    </c:forEach>
                    </tbody>
                </table>
                <%-- 分页--%>
                <div id="bottom">
                    <div>
                        <nav aria-label="..." style="text-align:center;">
                            <ul class="pagination layui-laypage" style="white-space: nowrap">
                                <%-- 向前翻页--%>
                                <li style="display: inline-block"><a href="javascript:ajaxsplit(${coachInfo.prePage})" aria-label="Previous">&laquo;</a></li>

                                <c:forEach begin="1" end="${coachInfo.pages}" var="i">
                                    <c:if test="${coachInfo.pageNum==i}">
                                        <li style="display: inline-block">
                                            <a href="javascript:ajaxsplit(${i})"
                                               style="background-color: #DFDFDF">${i}</a>
                                        </li>
                                    </c:if>
                                    <c:if test="${coachInfo.pageNum!=i}">
                                        <li style="display: inline-block">
                                            <a href="javascript:ajaxsplit(${i})">${i}</a>
                                        </li>
                                    </c:if>
                                </c:forEach>
                                <%-- 向后翻页--%>
                                <li style="display: inline-block"><a href="javascript:ajaxsplit(${coachInfo.nextPage})" aria-label="Previous">&raquo;</a></li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>
            <!-- 右侧内容框架，更改从这里结束 -->
        </div>
    </div>
    <!-- 右侧主体结束 -->
</div>
<!-- 中部结束 -->
<!-- 页面动态效果 -->
<script>
    //分页
    function ajaxsplit(page) {
        var a = $("#cotype").val();
        var b = $("#username").val();
        //异步ajax分页请求
        if (a.length==0&&b.length==0){
            //无条件分页
            $.ajax({
                url:"${pageContext.request.contextPath}/member/coachPageSplit.action",
                data:{"page":page},
                type:"post",
                success:function () {
                    //更新id=table部分内容
                    $("#table").load("http://localhost:8080/GamnasiumSystem/memcoach_list.jsp #table");
                }
            });
        }else {
            //带条件分页
            $.ajax({
                url:"${pageContext.request.contextPath}/member/selectSplit.action",
                data:{
                    page:page,
                    cotype:a,
                    username:b
                },
                type:"post",
                success:function () {
                    //更新id=table部分内容
                    $("#table").load("http://localhost:8080/GamnasiumSystem/memcoach_list.jsp #table");
                }
            });
        }

    }
    function infor(){
        // console.log("网页刷新执行");
        //ajax获取coach数据列表
        $.ajax({
            url:"${pageContext.request.contextPath}/member/coachlist.action",
            type:"get",
            dataType:"json",
            success:function (data){
                // console.log(data);
                //先清空tbody内容
                $("#tb").children().remove();
                //将date追加到表格展示
                if (data.length!=0){
                    $(data).each(function (index,item) {
                        $("#tb").append("<tr><td hidden>"+item.coachid+"</td><td>"+item.coachrealname+"</td><td>"+item.coachsex+
                            "</td><td>"+item.coachLogName+"</td><td>"+item.cotype+
                            "</td><td class='td-status'>"+
                            "<span class='layui-btn layui-btn-normal layui-btn-mini' onclick='reser(this.parentNode.parentNode.firstChild)'>预约</span></td></tr>");
                    });
                    $("#listSize").html("共有数据："+data.length+" 条");
                }
            }
        });
    }
    // infor();
    //预约教练
    function reser(index) {
        //获取选择的教练的coachid:index.innerText
        //用Ajax获取报名信息，课程和会员信息（session中有，可忽略）
        $.ajax({
            url:"${pageContext.request.contextPath}/member/reserveCoach.action",
            type:"post",
            data: {coachid:index},
            dataType:"text",
            success:function (result){
                // console.log(result);
                if (result=="ok"){
                    x_admin_show("教练预约","${pageContext.request.contextPath}/mem_reserveCoach.jsp","600","550");
                }else {
                    layer.msg("您已预约！请勿重复预约！");
                }
            },
            error:function (){
                alert("课程异常error");
            }
        });
        // 弹框显示确定报名信息。
        // 将报名信息写入报名表。
    }
    //多条件搜索，用Ajax发送请求接收请求显示在表格
    $("#memfindcoach").click(function (){
        $.ajax({
            url: "${pageContext.request.contextPath}/member/memfindcoach.action",
            type: "post",
            data: {cotype:$("#cotype").val(),username:$("#username").val()},
            success:function (){
                $("#table").load("http://localhost:8080/GamnasiumSystem/memcoach_list.jsp #table");
            },
            error:function (){
                console.log("error");
            }
        });
    });
</script>

</body>
</html>
